import React, { useRef, useEffect } from "react";

import { View, Text, StyleSheet, TouchableOpacity, Image, GestureResponderEvent } from "react-native"
import MessageStore from "./MessageStore";
import { observer, useLocalObservable } from 'mobx-react';
import { useNavigation } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";


import { FlatList, GestureStateChangeEvent } from "react-native-gesture-handler";
import FloatMenu, { FloatMenuRef } from "./FloatMenu";
import icon_star from '../../assets/icon_star.png';
import icon_new_follow from '../../assets/icon_new_follow.png';
import icon_comments from '../../assets/icon_comments.png';
import icon_group from '../../assets/icon_group.png';
import icon_to_top from '../../assets/icon_to_top.png';
import icon_no_collection from '../../assets/icon_no_collection.webp';


export default observer(() => {
    const store = useLocalObservable(() => new MessageStore());
    const navigation = useNavigation<StackNavigationProp<any>>();
    const ref = useRef<FloatMenuRef>(null)
    useEffect(() => {
        store.requestMessageList();
        store.requestUnReadList();
    }, [])
    const renderTitle = () => {

        return (
            <View style={styles.titleLayout}>

                <Text style={styles.titleTxt}>消息</Text>
                <TouchableOpacity onPress={(event: GestureResponderEvent) => {
                    const { pageY } = event.nativeEvent
                    ref.current?.show(pageY + 48);
                }} style={styles.groupButton}>
                    <Image style={styles.groupImg} source={icon_group} />
                    <Text style={styles.groupTxt}>群聊</Text>
                </TouchableOpacity>

            </View>
        )
    }
    const renderItem = ({ item, index }: { item: MessageListItem, index: number }) => {
        const styles = StyleSheet.create({
            item: {
                width: '100%',
                height: 80,
                alignItems: 'center',
                flexDirection: 'row',
                paddingHorizontal: 16
            },
            itemImg: {
                width: 48,
                height: 48,
                resizeMode: 'contain',
                borderRadius: 24
            },
            contentLayout: {
                flex: 1,
                marginHorizontal: 12
            },
            nameTxt: {
                fontSize: 16,
                fontWeight: 'bold',
                color: "#333"
            },
            lastTxt: {
                fontSize: 14,
                color: '#999',
                marginTop: 6
            },
            rightLayout: {
                alignItems: 'flex-end'
            },
            timeTxt: {
                fontSize: 14,
                color: '#999'
            },
            topImg: {
                width: 8,
                height: 16,
                resizeMode: 'contain',
                marginTop: 6
            }
        })
        return (
            <View style={styles.item}>
                <Image style={styles.itemImg} source={{ uri: item.avatarUrl }} />
                <View style={styles.contentLayout}>
                    <Text style={styles.nameTxt}>{item.name}</Text>
                    <Text style={styles.lastTxt}>{item.lastMessage}</Text>
                </View>
                <View style={styles.rightLayout}>
                    <Text style={styles.timeTxt}>{item.lastMessageTime}</Text>
                    <Image style={styles.topImg} source={icon_to_top} />
                </View>
            </View>

        )
    }
    const UnRead = ({ count }: { count: number }) => {
        const styles = StyleSheet.create({
            count: {
                position: 'absolute',
                top: -6,
                right: -4,
                backgroundColor: 'red',
                color: '#f0f0f0',
                paddingHorizontal: 8,
                height: 20,
                borderRadius: 12,
                textAlign: 'center',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 13
            }
        })
        return (
            <Text style={styles.count}>{count > 99 ? '99+' : count}</Text>
        )
    }
    const Header = () => {
        const { unRead } = store
        console.log(unRead);

        const styles = StyleSheet.create({
            headerLayout: {
                paddingHorizontal: 16,
                flexDirection: 'row',
                paddingVertical: 20
            },
            headerItem: {
                flex: 1,
                alignItems: 'center'
            },
            headerImg: {
                width: 60,
                height: 60,
                resizeMode: 'contain'
            },
            headerTxt: {
                fontSize: 16,
                marginTop: 10,
                color: '#000'
            }
        })
        return (
            <View style={styles.headerLayout}>
                <View style={styles.headerItem}>
                    <View>
                        <Image style={styles.headerImg} source={icon_star} />
                        {!!unRead?.unreadFavorate && <UnRead count={unRead?.unreadFavorate} />}
                    </View>
                    <Text style={styles.headerTxt}>赞与收藏</Text>
                </View>
                <View style={styles.headerItem}>
                    <View>
                        <Image style={styles.headerImg} source={icon_new_follow} />
                        {!!unRead?.newFollow && <UnRead count={unRead?.newFollow} />}

                    </View>
                    <Text style={styles.headerTxt}>新增关注</Text>
                </View>
                <View style={styles.headerItem}>
                    <View>
                        <Image style={styles.headerImg} source={icon_comments} />
                        {!!unRead?.comment && <UnRead count={unRead?.comment} />}
                    </View>
                    <Text style={styles.headerTxt}>评论和@</Text>
                </View>
            </View>
        )
    }

    return (
        <View style={styles.root}>
            {renderTitle()}
            <FlatList
                style={{ flex: 1 }}
                data={store.MessageList}
                extraData={store.unRead}
                keyExtractor={(item) => `${item.id}`}
                renderItem={renderItem}
                ListHeaderComponent={<Header />}
            />
            <FloatMenu ref={ref} />
        </View>
    )
})
const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
    },
    titleLayout: {
        width: '100%',
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    titleTxt: {
        fontSize: 18,
        color: '#333'
    },
    groupButton: {
        flexDirection: 'row',
        alignItems: 'center',
        position: 'absolute',
        right: 16,
    },
    groupImg: {
        width: 16,
        height: 16,
        resizeMode: 'contain'
    },
    groupTxt: {
        fontSize: 14,
        color: '#333',
        marginLeft: 6
    },

})